<template>
    <div class="discuss-header">
        <div class="box1">
          <span style="font-size: 25px;color: #18191c">评论</span>
          <span v-show="commentLength > 0" class="count">{{commentLength}}</span>
        </div>
        <!-- <div class="box2">
          <span class="active">最热</span>
          <span class="active" style="font-size:12px;"> | </span>
          <span>最新</span>
        </div> -->
    </div>
</template>

<script>
export default {
    props:{
        commentLength:{
            type:Number
        }
    }
}
</script>

<style scoped>
    .discuss-header{
        display: flex;
        width: 1225px;
        height: 46px;
        margin: 0 auto;
    }
    .discuss-header .box1{
        display: flex;
        height: 34px;
    }
    .discuss-header .box2{
        display: flex;
        width: 100px;
        padding-left: 20px;   
        justify-content: space-between;       
    }
    .discuss-header .box2 span{
        display: inline-block;
        height: 34px;
        line-height: 34px;
        font-size: 16px;
        color: #b5b8bd;
    }
    .box1 .count{
        height: 34px;            
        font-size: 15px; 
        font-weight: 200; 
        color: #b2b5ba;
        padding: 9px 10px;
    }
    .box2 .active{
        color: #000;
    }
</style>